<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChatGPT 界面</title>
    <style>
        /* CSS 样式直接内嵌在这里 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .header h1 {
            text-align: center;
            color: #333;
        }
        .input-area {
            display: flex;
            align-items: center;
            margin-top: 20px;
        }
        #user-input {
            flex: 1;
            padding: 10px;
            font-size: 14px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .icons {
            margin-left: 10px;
            display: flex;
            gap: 5px;
        }
        .icon-btn {
            background: none;
            border: none;
            font-size: 18px;
            cursor: pointer;
        }
        #send-btn {
            margin-left: 10px;
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        #send-btn:hover {
            background-color: #0056b3;
        }
        .response-area {
            border: 1px solid #ccc;
            padding: 10px;
            margin-top: 10px;
            height: 300px;
            overflow-y: auto; /* 启用滚动条 */
            background-color: #f9f9f9;
            font-size: 14px;
        }
        .chat-message {
            margin-bottom: 10px;
        }
        .chat-message.user {
            text-align: right;
            color: #007bff;
        }
        .chat-message.assistant {
            text-align: left;
            color: #333;
        }
        .footer {
            text-align: center;
            margin-top: 20px;
            font-size: 12px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>ChatGPT 对话</h1>
        <div class="chat-container">
            <div class="response-area" id="response-area"></div>
            <div class="input-area">
                <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
                <input type="text" id="user-input" placeholder="输入您的问题...">
                <button id="send-btn">发送</button>
            </div>
        </div>
    </div>
    <script>
         // 获取页面元素
         const sendBtn = document.querySelector('#send-btn');
        const userInput = document.querySelector('#user-input');
        const responseArea = document.querySelector('#response-area');
        const csrfTokenElement = document.querySelector('[name=csrfmiddlewaretoken]');

        // 检查是否能找到 CSRF Token
        if (!csrfTokenElement) {
            console.error('CSRF token input element not found. 请检查页面中是否包含 CSRF Token 输入框。');
        } else {
            const csrfToken = csrfTokenElement.value;

            // 为发送按钮绑定点击事件
            sendBtn.addEventListener('click', function () {
                const message = userInput.value.trim(); // 获取用户输入内容

                // 检查输入是否为空
                if (!message) {
                    alert('请输入消息');
                    return;
                }

                // 显示用户消息
                const userMessage = document.createElement('div');
                userMessage.className = 'chat-message user';
                userMessage.textContent = "我: " + message;
                responseArea.appendChild(userMessage);
                responseArea.scrollTop = responseArea.scrollHeight; // 滚动到底部

                // 清空输入框
                userInput.value = '';

                // 创建 AJAX 请求
                const xhr = new XMLHttpRequest();
                xhr.open("POST", "/chat/", true);
                xhr.setRequestHeader("Content-Type", "application/json");
                xhr.setRequestHeader("X-CSRFToken", csrfToken);

                // 构造JSON数据
                const data = {
                    message: message
                };

                // 发送JSON格式的数据
                xhr.send(JSON.stringify(data));

                xhr.onload = function () {
                    if (xhr.status === 200) {
                        try {
                            const response = JSON.parse(xhr.responseText);
                            // 不需要重复显示用户消息，因为发送时已经显示过了
                            if (response.reply) {
                                const assistantMessage = document.createElement('div');
                                assistantMessage.className = 'chat-message assistant';
                                assistantMessage.textContent = "ChatGPT: " + response.reply;
                                responseArea.appendChild(assistantMessage);
                            }
                            responseArea.scrollTop = responseArea.scrollHeight;
                        } catch (e) {
                            console.error("JSON 解析错误:", e);
                        }
                    }
                };

                // 请求出错时的处理
                xhr.onerror = function () {
                    const errorMessage = document.createElement('div');
                    errorMessage.className = 'chat-message assistant';
                    errorMessage.textContent = "请求发送失败，请检查网络连接。";
                    responseArea.appendChild(errorMessage);
                    responseArea.scrollTop = responseArea.scrollHeight; // 滚动到底部
                    console.error("网络错误，无法发送请求。");
                };

            });
        }
    </script>
</body>
</html>
